<template>
  <div>
    <el-row>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24"
        ><div class="grid-content bg-purple">
          <el-image style="width: 100%; height: 600px" :src="src" fit=" fill">
          </el-image>
        </div>
        <div class="typer">
          <div class="typer-content">
            <p class="typer-static">I'm&nbsp;</p>
            <!-- 动态变化的内容-->
            <p class="typer-dynamic">
              <span class="cut">
                <span
                  class="word"
                  v-for="(letter, index) in words"
                  :key="index"
                  >{{ letter }}</span
                >
              </span>
              <!-- 模拟光标-->
              <span class="typer-cursor"></span>
            </p>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :xs="0" :sm="4" :md="4" :lg="4" :xl="4"
        ><div class="grid-content bg-purple"></div
      ></el-col>

      <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16"
        ><div>
          <div class="zhu">
            <div class="authorAvatar">
              <img :src="authorInfo.author.authorAvatar" alt="" />
            </div>
            <div class="authorInfo">
              <div class="text-center">
                <div class="about-info">
                  <div class="about-name">
                    {{ this.authorInfo.author.authorName }}
                  </div>
                  <div class="about-intro">前端 / 编程爱好者 / 热恋中..</div>
                  <div class="about-icons">
                    <a
                      href="https://gitee.com/sucaihua"
                      class="hint--bottom hint--rounded"
                      aria-label="gitee"
                      target="_blank"
                      ><svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gitee2"></use>
                      </svg> </a
                    ><a
                      href="https://github.com/sucaihua"
                      class="hint--bottom hint--rounded"
                      aria-label="GitHub"
                      target="_blank"
                      ><svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-github-fill"></use>
                      </svg> </a
                    ><a
                      href="2813319028@qq.com"
                      class="hint--bottom hint--rounded"
                      aria-label="邮件"
                      target="_blank"
                      ><svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-youjian"></use>
                      </svg> </a
                    ><a
                      href="https://space.bilibili.com/120878428"
                      class="hint--bottom hint--rounded"
                      aria-label="哔哩哔哩"
                      target="_blank"
                    >
                      <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bilibili-line"></use></svg></a
                    ><a
                      href="https://afdian.net/@MouriNaruto"
                      class="hint--bottom hint--rounded"
                      aria-label="CSDN"
                      target="_blank"
                    >
                      <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-csdn-copy"></use></svg
                    ></a>
                    <a
                      href="https://afdian.net/@MouriNaruto"
                      class="hint--bottom hint--rounded"
                      aria-label="博客"
                      target="_blank"
                      ><svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xieboke"></use></svg
                    ></a>
                    <a
                      href="https://afdian.net/@MouriNaruto"
                      class="hint--bottom hint--rounded"
                      aria-label="CSDN"
                      target="_blank"
                      ><svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-QQ"></use></svg
                    ></a>
                  </div>
                </div>
              </div>

              <div class="gitee">
                <gitee item='sucaihua'></gitee>
              </div>

              <article class="about-content">
                <div class="markdown-body">
                  <h2 id="自我介绍">自我介绍</h2>
                  <ul>
                    <li>我现在在网络上主要使用的 ID 为 FFLOVE</li>
                    <li>FF是我女朋友,LOVE也就是爱,以爱为名，化之动力</li>
                    <li>
                      我目前是一名大三学生，目前主要想发展的方向是前端开发
                    </li>

                    <li>
                      我现在主要的爱好就是编程，现在我的主要编程语言是JavaScript
                    </li>
                  </ul>
                  <h2 id="基本情况">基本情况</h2>
                  <ul>
                    <li>正在积累前端各类技能</li>
                    <li>在编程方面属于完美主义者，以写短小精悍的程序为己任</li>
                    <li>每日必上 BiliBili 和 GitHub以及和女朋友视频通话</li>

                    <li>每日一道算法题</li>
                    <li>正在学习各种基础知识</li>
                    <li>也正在接触后端,想进行全栈开发</li>
                  </ul>
                  <h2 id="编程技能">编程技能</h2>
                  <!-- <ul>
                    <li>程序语言: 熟悉 C/C++, C#, Python</li>
                    <li>
                      开发工具: 日常在 Windows 下使用 Visual
                      Studio、IDA，同时也经常使用 Git, VSTS 等团队协作工具
                    </li>
                    <li>
                      Windows C++ 应用开发: 有使用 Windows SDK (Win32, COM, ATL,
                      WTL, WRL, C++/CX, C++/WinRT) 开发实际项目的经验
                    </li>
                    <li>
                      .Net Core 应用开发: 有使用 WPF, ASP.NET Core, Xamarin
                      开发实际项目的经验
                    </li>
                    <li>
                      Linux 应用开发: 有开发 ROS1 节点、Qt 图形应用程序的经验
                    </li>
                  </ul> -->
                  <div>
                    <dv-capsule-chart
                      :config="config"
                      style="margin-bottom: 300px;width: 300px; height: 200px; color: #3c4858"
                    />
                  </div>

                 
                </div>
              </article>
            </div>
          </div>
        </div></el-col
      >

      <el-col :xs="0" :sm="4" :md="4" :lg="4" :xl="4"
        ><div class="grid-content bg-purple-light"></div
      ></el-col>
    </el-row>
  </div>
</template>

<script>
import src from "@/assets/404_images/preview.jpg";
import gitee from "../book_data/components/gitee.vue";
import axios from "axios";
export default {
  components: {
    gitee,
  },
  data() {
    return {
      words: [], //字母数组push，pop的载体
      str: "未来可期，不负韶华", //str初始化
      letters: [], //str分解后的字母数组
      order: 1, //表示当前是第几句话

      authorInfo: {},
      src: "https://mourinaruto.github.io/img/background.png",
      config: {
        data: [
          {
            name: "Vue",
            value: 80,
          },
          {
            name: "JavaScript",
            value: 67,
          },
          {
            name: "CSS",
            value: 60,
          },
          {
            name: "ESLint",
            value: 55,
          },
          {
            name: "C++",
            value: 50,
          },
          {
            name: "Python",
            value: 60,
          },
          {
            name: "Java",
            value: 60,
          },
          {
            name: "node.js",
            value: 60,
          },
          {
            name: "MySQL",
            value: 40,
          },
        ],
      },
    };
  },
  watch: {
    //监听order值的变化，改变str的内容
    order(old, newV) {
      this.getOneWord();
    },
  },

  mounted() {
    this.begin();
  },
  methods: {
    //获取一言接口
    async getOneWord() {
      await axios
        .get("https://v1.hitokoto.cn")
        .then(({ data }) => {
          console.log(data);
          this.str = data.hitokoto;
        })
        .catch(console.error);
    },

    //获取开发成员信息
    getAuthorInfo() {
      this.$store.dispatch("user/getDevelopers").then((res) => {
        console.log("获取开发人员信息");
        console.log(res);
        this.authorInfo = res[1];
        //  this.src=res[0].author.authorBackImg
        console.log(this.authorInfo);
      });
    },
    //开始输入的效果动画
    begin() {
      this.letters = this.str.split("");
      for (var i = 0; i < this.letters.length; i++) {
        setTimeout(this.write(i), i * 200);
      }
    },
    //开始删除的效果动画
    back() {
      let L = this.letters.length;
      for (var i = 0; i < L; i++) {
        setTimeout(this.wipe(i), i * 50);
      }
    },
    //输入字母
    write(i) {
      return () => {
        let L = this.letters.length;
        this.words.push(this.letters[i]);
        let that = this;
        /*如果输入完毕，在2s后开始删除*/
        if (i == L - 1) {
          setTimeout(function () {
            that.back();
          }, 3000);
        }
      };
    },
    //擦掉(删除)字母
    wipe(i) {
      return () => {
        this.words.pop(this.letters[i]);
        /*如果删除完毕，在300ms后开始输入*/
        if (this.words.length == 0) {
          this.order++;
          let that = this;
          setTimeout(function () {
            that.begin();
          }, 300);
        }
      };
    },
  },
  created() {
    this.getOneWord();
    this.getAuthorInfo();

    console.log("获取开发人员信息");
  },
};
</script>

<style>
.icon {
  width: 2em;
  height: 1.5em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
}
.bg-purple {
}
.bg-purple-light {
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.zhu {
  position: relative;
  border-radius: 7px;
  top: 190px;
  background: #ffffff;
  box-shadow: 5px 5px 9px #b0b0b0, -5px -5px 9px #ffffff;
  margin-top: 5rem;
  z-index: 2;
}

.authorAvatar {
  margin: -8rem auto 1rem;
  width: 10rem;
  height: 10rem;
  z-index: 2;
}
.authorAvatar img {
  width: 100%;
  height: 100%;

  margin: -5rem auto 1rem;
  border-radius: 50%;
}
.text-center {
  text-align: center;
  margin: -5rem auto 1rem;
  color: #3c4858;
}
.about-name {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.about-intro {
  margin-bottom: 5px;
}
.about-content {
  padding-left: 4em;
}
.about-content p {
  font-size: 1.25rem;
  line-height: 1.5;
}
.markdown-body ul li {
  font-size: 1rem;
  line-height: 1;

  margin-bottom: 1rem;
  color: var(--post-text-color);
}
.gitee {
  height: 200px;
}

.typer {
  /* position: absolute; */
  box-sizing: border-box;
  margin-top: -430px;
  margin-left: 30%;
  text-align: center;
  width: 40%;
  height: 250px;
}
.typer .typer-content {
  font-weight: bold;
  /* font-size: 100%; */
  /* 文字大小随屏幕变化而变化 */
  font-size: calc(1.5rem + 0.5vw);
   font-family: '华文琥珀';
  display: flex;
  color: #3c4858;
  flex-direction: row;
  letter-spacing: 2px;
}
.typer-dynamic {
  position: relative;
}
.cut {
}
.typer-cursor {
  position: absolute;
  height: 100%;
  width: 3px;
  top: 0;
  right: -10px;

  animation: flash 1.5s linear infinite;
}
</style>
